<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/gg.css">
    <title>网易云音乐</title>
</head>

<body>

    <header>
        <div class="headertop mar clearFix">
            <h1 class="lf"><a href=""></a></h1>
            <ul class="lf">
                <li class="active"><a href="">发现音乐</a></li><li><a href="">我的音乐</a></li>
                <li><a href="">关注</a></li>
                <li><a href="">商城</a></li>
                <li><a href="">音乐人</a></li>
                <li class="position"><a href="">下载客户端</a></li>
            </ul>
            <div class="topbtnbox rg">
                <input type="text" placeholder="音乐/视频/电台/用户">
                <button class="topczz">创作者中心</button>
                <a href="">登录</a>
            </div>
        </div>
    </header>

    <div class="topnavbox">
        <div class="topnav mar">
            <ul class="clearFix">
                <li class="position"><a class="active1" href="">推荐</a></li>
                <li><a href="">排行榜</a></li>
                <li><a href="">歌单</a></li>
                <li><a href="">主播电台</a></li>
                <li><a href="">歌手</a></li>
                <li><a href="">新碟上架</a></li>
            </ul>
        </div>
    </div>

    <div class="bannerbox">
        <div class="banner mar box position clearFix">
            <span class="anlf"></span>
            <span class="anrg"></span>
            <div class="bannerimg lf">
                <ul class="position">
                    <li><a href=""><img src="./images/banner.jpg" alt=""></a></li>
                    <div class="bannerbtn">
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    </div>
                </ul>
            </div>
            <div class="rg downbox">
                <a class="down" href=""></a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
        </div>
    </div>

    <div class="contbox box mar clearFix">
        <div class="lf contlf">
            <div class="gg rmtjbox">
                <div class="ggg rmtj clearFix position">
                    <h2 class="lf"><a href="">热门推荐</a></h2>
                    <ul class="lf">
                        <li><a href="">华语</a></li> |
                        <li><a href="">流行</a></li> |
                        <li><a href="">摇滚</a></li> |
                        <li><a href="">民谣</a></li> |
                        <li><a href="">电子</a></li>
                    </ul>
                    <p class="rg">
                        <a href="">更多</a>
                        <i></i>
                    </p>
                </div>
                <div class="tjgqbox clearFix">
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd1.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">1935万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href="">失恋日记 | 换不同的场景 但哪里都是你</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd2.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">1935万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href="">如果当时忍住做朋友就好了</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd3.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">1935万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href=""><i></i>下次遇见喜欢的人记得要勇敢</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd4.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">935万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href="">最幸运｜补位去好莱坞片场看了一回《生活大爆炸》录制</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd5.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">35万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href=""><i></i>果味音乐集 | 带给你一整天的轻快旋律</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd6.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">195万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href="">为证明自己不是精神病人，他偷穿医生白大褂逃跑</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd7.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">19325万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href=""><i></i>华语伤感 | 遇见了你却错过了她</a></p>
                    </div>
                    <div class="lf tjgq">
                        <div class="tjgqimgbox position">
                            <a class="tjgqimg" href="">
                                <img src="./images/tjgd8.jpg" alt="">
                            </a>
                            <div class="bflbox clearFix">
                                <i class="lf"></i>
                                <span class="lf">14万</span>
                                <a class="rg" href=""></a>
                            </div>
                        </div>
                        <p><a href="">不可以捡梳子</a></p>
                    </div>
                </div>
            </div>
            <div class="gg xdsjbox">
                <div class="ggg xdsj clearFix position">
                    <h2 class="lf"><a href="">新碟上架</a></h2>
                    <p class="rg">
                        <a href="">更多</a>
                        <i></i>
                    </p>
                </div>
                <div class="xdbox position">
                    <span class="xdlf lf"></span>
                    <span class="xdrg rg"></span>
                    <ul class="clearFix mar">
                        <li class="position lf"><img src="./images/xd1.jpg" alt=""><a class="xgbj" href=""></a>
                            <p class="gs"><a href="">Cooped Up</a></p>
                            <p><a href="">Post Malone / Roddy </a></p>
                            <span class="xdbf"></span>
                        </li>
                        <li class="position lf"><img src="./images/xd2.jpg" alt=""><a class="xgbj" href=""></a>
                            <p class="gs"><a href="">石敢当</a></p>
                            <p><a href="">木推瓜</a></p>
                            <span class="xdbf"></span>
                        </li>
                        <li class="position lf"><img src="./images/xd3.jpg" alt=""><a class="xgbj" href=""></a>
                            <p class="gs"><a href="">HOPE / WISH</a></p>
                            <p><a href="">平井 大</a></p>
                            <span class="xdbf"></span>
                        </li>
                        <li class="position lf"><img src="./images/xd4.jpg" alt=""><a class="xgbj" href=""></a>
                            <p class="gs"><a href="">This Love (Taylor's Version)</a></p>
                            <p><a href="">Taylor Swift</a></p>
                            <span class="xdbf"></span>
                        </li>
                        <li class="position lf"><img src="./images/xd5.jpg" alt=""><a class="xgbj" href=""></a>
                            <p class="gs"><a href="">也是蓝</a></p>
                            <p><a href="">也是福 / 派克特（PACT） / PO8 / 喜辰晨 / 周士爵 / 小老虎 / 马思唯 / 五石散 / 张津瑞 / 刘越 / 孟宇 yumeng.music</a></p>
                            <span class="xdbf"></span>
                        </li>
                    </ul>
                </div>
            </div>



            <div class="gg bdbox">
                <div class="ggg bd clearFix position">
                    <h2 class="lf"><a href="">榜单</a></h2>
                    <p class="rg">
                        <a href="">更多</a>
                        <i></i>
                    </p>
                </div>
               <div class="gqbdbox">
                   <div class="gqbd clearFix">
                       <ul class="lf bsb">
                           <div class="gqbdtop clearFix">
                                <div class="gqbdimg lf  position"><img src="./images/b1.jpg" alt=""><a href=""></a></div>
                                <div class="lf btext">
                                    <p><a class="wz" href="">飙升榜</a></p>
                                    <p>
                                        <a class="bdbs" href=""></a>
                                        <a class="bdsc" href=""></a>
                                    </p>
                                </div>
                           </div>
                           <li class="position"><span class="span1">1</span><a class="gqming" href="">我以为你不会出现<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">2</span><a class="gqming" href="">半情歌<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">3</span><a class="gqming" href="">先说谎的人<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">4</span><a class="gqming" href="">十四分之一<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">5</span><a class="gqming" href="">篇章<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">6</span><a class="gqming" href="">假装（Prod. Polobear）<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">7</span><a class="gqming" href="">孤独的船<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">8</span><a class="gqming" href="">清风<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">9</span><a class="gqming" href="">POP SONG<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">10</span><a class="gqming" href="">摇摆少年<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><a class="gqming" href="">查看全部></a></li>
                       </ul>
                       <ul class="lf xgb">
                           <div class="gqbdtop clearFix position">
                                <div class="gqbdimg lf  position"><img src="./images/b2.jpg" alt=""><a href=""></a></div>
                                <div class="lf btext">
                                    <p><a class="wz" href="">新歌榜</a></p>
                                    <p>
                                        <a class="bdbs" href=""></a>
                                        <a class="bdsc" href=""></a>
                                    </p>
                                </div>
                           </div>
                           <li class="position"><span class="span1">1</span><a class="gqming" href="">篇章<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">2</span><a class="gqming" href="">Bet On Me (Organic Version)<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">3</span><a class="gqming" href="">高山低谷 (Live)<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">4</span><a class="gqming" href="">玫瑰少年<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">5</span><a class="gqming" href="">背觉迷<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">6</span><a class="gqming" href="">假装（Prod. Polobear）<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">7</span><a class="gqming" href="">想自由<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">8</span><a class="gqming" href="">清风<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">9</span><a class="gqming" href="">再次爱上你<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><span class="span1">10</span><a class="gqming" href="">想到你<i><span></span><span></span><span></span></i></a></li>
                           <li class="position"><a class="gqming" href="">查看全部></a></li>
                       </ul>
                       <ul class="lf ycb">
                           <div class="gqbdtop clearFix position">
                                <div class="gqbdimg lf  position"><img src="./images/b3.jpg" alt=""><a href=""></a></div>
                                <div class="lf btext">
                                    <p><a class="wz" href="">原创榜</a></p>
                                    <p>
                                        <a class="bdbs" href=""></a>
                                        <a class="bdsc" href=""></a>
                                    </p>
                                </div>
                           </div>
                          <li class="position"><span class="span1">1</span><a class="gqming" href="">我以为你不会出现<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">2</span><a class="gqming" href="">DIOR<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">3</span><a class="gqming" href="">你的天空<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">4</span><a class="gqming" href="">十四分之一<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">5</span><a class="gqming" href="">背觉迷<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">6</span><a class="gqming" href="">假装（Prod. Polobear）<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">7</span><a class="gqming" href="">人海<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">8</span><a class="gqming" href="">清风<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">9</span><a class="gqming" href="">平原<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><span class="span1">10</span><a class="gqming" href="">摇摆少年<i><span></span><span></span><span></span></i></a></li>
                          <li class="position"><a class="gqming" href="">查看全部></a></li>
                       </ul>
                   </div>
               </div>

            </div>
        </div>
        <div class="rg contrg">
            <div class="dlbox">
                <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                <a href="">用户登录</a>
            </div>
            <div class="rzgsbox">
                <div class="rzgs clearFix">
                    <span class="lf">入驻歌手</span>
                    <a href="" class="rg">查看更多></a>
                </div>
                <div class="gspeople clearFix">
                   <div class="lf">
                        <a href=""><img src="./images/gs1.jpg" alt=""></a>
                   </div>
                   <div class="rg">
                       <p>张惠妹aMEI</p>
                       <p>台湾歌手张惠妹</p>
                   </div>
                </div>
                <div class="gspeople clearFix">
                    <div class="lf">
                         <a href=""><img src="./images/gs2.jpg" alt=""></a>
                    </div>
                    <div class="rg">
                        <p>呉墨愁Momo</p>
                        <p>《中国好声音》选手吴莫愁</p>
                    </div>
                 </div>
                 <div class="gspeople clearFix">
                    <div class="lf">
                         <a href=""><img src="./images/gs3.jpg" alt=""></a>
                    </div>
                    <div class="rg">
                        <p>孙楠</p>
                        <p>歌手孙楠 代表作《你快回来》《燃烧》</p>
                    </div>
                 </div>
                 <div class="gspeople clearFix">
                    <div class="lf">
                         <a href=""><img src="./images/gs4.jpg" alt=""></a>
                    </div>
                    <div class="rg">
                        <p>麦田老狼</p>
                        <p>歌手，音乐人。代表作《同桌的你》等。</p>
                    </div>
                 </div>
                 <div class="gspeople clearFix">
                    <div class="lf">
                         <a href=""><img src="./images/gs5.jpg" alt=""></a>
                    </div>
                    <div class="rg">
                        <p>陈楚生</p>
                        <p>唱作歌手</p>
                    </div>
                 </div>
            </div>

            <div class="sqyyr">
                <a href="">申请成为网易音乐人</a>
            </div>

            <div class="rmzbbox">
                <p class="rmzb">热门主播</p>
                <div class="zbpeople clearFix">
                    <div class="zbimg lf">
                        <a href=""><img src="./images/zb1.jpg" alt=""></a>
                    </div>
                    <div class="lf zbname">
                        <p><a href="">陈立</a></p>
                        <p>心理学家、美食家陈立教授</p>
                    </div>
                </div>
                <div class="zbpeople clearFix">
                    <div class="zbimg lf">
                        <a href=""><img src="./images/zb2.jpg" alt=""></a>
                    </div>
                    <div class="lf zbname">
                        <p><a href="">刘维-Julius</a></p>
                        <p>歌手、播客节目《维维道来》主理人</p>
                    </div>
                </div>
                <div class="zbpeople clearFix">
                    <div class="zbimg lf">
                        <a href=""><img src="./images/zb3.jpg" alt=""></a>
                    </div>
                    <div class="lf zbname">
                        <p><a href="">莫非定律MoreFeel</a></p>
                        <p>男女双人全创作独立乐团</p>
                    </div>
                </div>
                <div class="zbpeople clearFix">
                    <div class="zbimg lf">
                        <a href=""><img src="./images/zb4.jpg" alt=""></a>
                    </div>
                    <div class="lf zbname">
                        <p><a href="">碎嘴许美达</a></p>
                        <p>脱口秀网络红人</p>
                    </div>
                </div>
                <div class="zbpeople clearFix">
                    <div class="zbimg lf">
                        <a href=""><img src="./images/zb5.jpg" alt=""></a>
                    </div>
                    <div class="lf zbname">
                        <p><a href="">银临Rachel</a></p>
                        <p>银临Rachel</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="foot box mar clearFix">
            <div class="lf wygg">
                <ul>
                    <li><a href="">服务条款</a></li> |
                    <li><a href="">隐私政策</a></li> |
                    <li><a href="">儿童隐私政策</a></li> |
                    <li><a href="">版权投诉</a></li> |
                    <li><a href="">投资者关系</a></li> |
                    <li><a href="">广告合作</a></li> |
                    <li><a href="">廉正举报</a></li> |
                    <li><a href="">联系我们</a></li>
                </ul>
                <p>
                    <span>网易公司版权所有©1997-2022</span>
                    <span>杭州乐读科技有限公司运营：</span>
                    <a href="">浙网文[2021] 1186-054号</a>
                </p>
                <p>
                    <a href="">粤B2-20090191-18  工业和信息化部备案管理系统网站</a>

                    &nbsp; <img src="./images/police.png" alt=""> <a href="">浙公网安备 33010902002564号 </a>
 
            </div>
            <div class="rg wyjl clearFix">
                    <div class="lf">
                        <a href=""></a>
                        <span></span>
                    </div>
                    <div class="lf">
                        <a href=""></a>
                        <span></span>
                    </div>
                    <div class="lf">
                        <a href=""></a>
                        <span></span>
                    </div>
                  <div class="lf">
                        <a href=""></a>
                        <span></span>
                    </div>
                    <div class="lf">
                        <a href=""></a>
                        <span></span>
                    </div>
            </div>
           


        </div>
    </footer>
</body>

</html>